/* eslint-disable */
import { Addon } from '@antv/x6'
import bus from './bus'
// 拖拽生成四边形或者圆形
export const startDragToGraph = (graph, type, e) => {
  const node =
    type === 'Node'
      ? graph.createNode({
          width: 160,
          height: 44,
          attrs: {
            label: {
              text: '',
              fill: '#333333',
              fontSize: 14,
              textWrap: {
                width: -10,
                height: -10,
                ellipsis: true
              }
            },
            body: {
              stroke: '#D8D8D8',
              strokeWidth: 1,
              fill: '#ffffff',
              types: ''
            }
          },
          ports
        })
      : graph.createNode({
          width: 460,
          height: 176,
          shape: 'rect',
          attrs: {
            label: {
              text: '',
              fill: '#333333',
              fontSize: 14,
              textWrap: {
                width: -10,
                height: -10,
                ellipsis: true
              }
            },
            body: {
              types: 'bigNode',
              stroke: 'rgba(20, 146, 255, 0.5)',
              strokeWidth: 1,
              strokeDasharray: 5,
              fill: 'rgba(20, 146, 255, 0.05)'
            }
          },
          ports
        })

  const dnd = new Addon.Dnd({ target: graph })
  dnd.start(node, e)
}
const ports = {
  groups: {
    // 输入链接桩群组定义
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 2,
          fill: '#fff'
        }
      }
    },
    // 输出链接桩群组定义
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 2,
          fill: '#fff'
        }
      }
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 2,
          fill: '#fff'
        }
      }
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 2,
          fill: '#fff'
        }
      }
    }
  },
  items: [
    {
      id: 'port1',
      group: 'top'
    },
    {
      id: 'port2',
      group: 'bottom'
    },
    {
      id: 'port3',
      group: 'left'
    },
    {
      id: 'port4',
      group: 'right'
    }
  ]
}
